<template>
	<view class="wrapForm">
		<view :style="'background:url('+resources.phoneBg+') no-repeat'" class="phoneBg pT20">
			<view class="searchBox  bgf mL15 mR15 radius30">
				<u-search placeholder="请输入用户完整手机号查询" v-model="query.phone" height="80" :show-action="false" bg-color="#fff"
					shape="square" @search='search'>
				</u-search>
			</view>
		</view>
		<view class="wrapFormBody pL15 pR15 pT15 myInfoForm">
			<view class="pT15">
				<view class="flex  mB10 " v-if="list">
					<view class="nameBox">
						{{getFirst(list?.contactName)}}
					</view>
					<view class="rightPhone mL15 u-border-bottom pB10 flex jst-between alg-center">
						<view>
							<view class="font16 bold">{{list?.contactName}}</view>
							<view class="u-6 font13 mT5">{{list?.contactPhone}}</view>
						</view>
						<view class="addBtn" @click="addUser">添加</view>
					</view>
				</view>
			</view>
		
		</view>
		<xfTipModal ref="tipModal"></xfTipModal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {queryPhoneUser,addPhoneUser} from '@/api/companyInterface/user.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					use: true,
					auto: false
				},
				query: {
					phone:""
				},
				list: null
			};
		},
		onShow(e) {
		
		},
		methods: {
			getFirst(v){
				return v?v.slice(0,1):''
			},
			search() {
				queryPhoneUser(this.query).then(res => {
					this.list = res.result;	
				}).catch(err => {
					
				})
			},
			addUser(){
				let that=this;
				this.$refs.tipModal.open({
					content:"确认添加"+that.list.contactName+'为联系人吗?',
					btntext:"添加",
					showCancel:true,
					success:function(){
						addPhoneUser(that.list).then(res=>{
							uni.showToast({
								icon:'none',
								title:"添加成功",
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						})
					}
				})
			}
		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.phoneBg{
		width: 100%;
		background-position:0 -160rpx !important;
		height: 666rpx;
		background-size: 100% 100% !important;
		position: relative;
		z-index: 1;
	}
	.wrapForm {
		height: 100%;
		.wrapFormBody {
			position: relative;
			z-index: 2;
			margin-top: -480rpx;
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
			min-height: 600rpx;
			.nameBox{
				width: 90rpx;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				background: #ECEFFE;
				color: #386AFF;
				font-size: 32rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
			}
			.rightPhone{
				width: calc(100% - 120rpx);
			}
			.addBtn{
				color:#698FFF;
				height: 50rpx;
				line-height: 48rpx;
				border-radius: 50rpx;
				padding: 0 30rpx;
				font-size: 26rpx;
				border: 2rpx solid #4474FF;
			}
		}
	}
</style>